<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500" style="border: 1px solid red;">
    	
    </canvas>
    <div id="info">
    	
    </div>
</body>
<script type="text/javascript">
	function drawDiagonal(){
//		alert(1);
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		context.beginPath();
		context.moveTo(0,0);
		context.lineTo(400,300);
		context.moveTo(400,0);
		context.lineTo(0,300);
		context.stroke();
		
		context.strokeStyle = "red";
		context.fillStyle = "aqua"
		context.fillRect(100,75,200,150)
		context.strokeRect(100,75,200,150);
		context.strokeRect(10,20,30,40);
		
		context.strokeStyle = "yellow";
		context.lineWidth = 10
		context.strokeRect(10,40,400,400);
	}
	
	window.addEventListener("load",drawDiagonal,true);
</script>
<!--<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var info = document.getElementById("info");
    if(canvas.getContext("2d")){
    	canvas.innerHTML = "支持";
    }else{
    	canvas.innerHTML = "不支持";
    }
</script>-->
</html>